<template>
	<view class="addBank">
		<view class="addBank-item" @click="open">
			<text class="chooseBank">请选择提现的银行卡</text>
			<view class="item-input">
				<input disabled class="input" :placeholder="activeCard.bankName ? activeCard.bankName : '选择银行卡'" style="font-size: 25rpx;padding: 0 20rpx;" />
			</view>
		</view>
		<view class="addBank-item">
			<view class="row1">
				<text class="inputMoney">请输入提现金额</text>
				<text class="currentMonry">当前余额：￥{{ JSON.parse($store.state.contentInfo).cashAmount || '0' }}</text>
			</view>
			<view class="item-input"><input class="input" v-model="parmes.applyAmount" placeholder="金额大于100即可提现" style="font-size: 25rpx;padding: 0 20rpx;" /></view>
		</view>
		<!-- <view class="addBank-item">
			<text class="inputPassword">请输入支付密码</text>
			<view class="item-input"><input type="password" class="input" style="font-size: 25rpx;padding: 0 20rpx;" /></view>
		</view> -->
		<view class="item-save-yes"><button @click="applyTixian" type="default">提交申请</button></view>
		<popupLayer ref="popupRef" :direction="'top'" v-model="boolShow">
			<view class="" style="background: #fff">
				<view class="" style="text-align: center;font-size: 30rpx;font-weight: bold;padding: 40rpx 0">选择银行卡</view>
				<view class="" v-if="cardList.length">
					<view class="box_card" v-for="(item, index) in cardList" @click="chooseCard(item)" :key="index">
						<view class="name flex_v_venter">{{ item.bankName }}</view>
						<view class="card flex_v_venter">{{ item.cardNo }}</view>
					</view>
				</view>
				<view class="flex_center" v-else style="font-size: 25rpx;color: #999;padding: 20rpx;">暂无数据</view>
				<view class="btn flex_center" @click="$go('../bankmamage/bankmamage')">去添加银行卡</view>
			</view>
		</popupLayer>
		<pay :show="payShow" @close="payCloseFunc" @emitPassword="emitPassword"></pay>
	</view>
</template>

<script>
import popupLayer from '../../../components/pop/popup-layer.vue';
import pay from '../../../components/payPassword/pay_Password.vue';
export default {
	data() {
		return {
			boolShow: false,
			cardList: [],
			payShow: false,
			activeCard: {},
			parmes: {
				applyAmount: ''
			}
		};
	},
	components: {
		popupLayer,
		pay
	},
	onShow() {
		this.$ajax('api/Member/QueryBank').then(res => {
			this.cardList = res.Data.list;
		});
	},
	methods: {
		payCloseFunc() {
			this.payShow = false;
		},
		emitPassword(e) {
			this.$ajax('api/Member/VerificationPayPassword',{payPassword:e}).then(res => {
				this.$ajax('api/Member/WithdrawApply', {
					applyAmount: this.parmes.applyAmount,
					bankAccount: this.activeCard.cardNo,
					bankName: this.activeCard.bankName,
					name: this.activeCard.name
				}).then(res => {
					uni.showToast({
						title: '转账成功'
						
					});
					uni.navigateBack({
						
					})
				})
			})
			
		},
		open() {
			this.$refs.popupRef.show();
		},
		close() {
			this.$refs.popupRef.close();
		},
		chooseCard(item) {
			this.activeCard = item;
			this.close();
		},
		applyTixian() {
			if(this.$store.state.isSetpassword){
				that.payShow = true
			}else{
				this.$ajax('api/Member/WithdrawApply', {
					applyAmount: this.parmes.applyAmount,
					bankAccount: this.activeCard.cardNo,
					bankName: this.activeCard.bankName,
					name: this.activeCard.name
				}).then(res => {
					uni.showToast({
						title: '转账成功'
						
					});
					uni.navigateBack({
						
					})
				})
			}
		}
	}
};
</script>

<style lang="scss">
.addBank {
	padding-top: 56rpx;
	.addBank-item {
		width: 690rpx;
		height: 132rpx;
		margin: 0 auto 59rpx;
		.chooseBank {
			color: #333333;
			font-size: 24rpx;
		}
		.inputPassword {
			color: #333333;
			font-size: 24rpx;
		}
		.row1 {
			display: flex;
			justify-content: space-between;
			.inputMoney {
				color: #333333;
				font-size: 24rpx;
			}
			.currentMonry {
				color: #999999;
				font-size: 24rpx;
			}
		}
		.item-input {
			.tips {
				color: #333333;
				font-size: 28rpx;
				margin-left: 26rpx;
			}
			.pla {
				color: #cbcbcb;
				font-size: 24rpx;
				margin-left: 26rpx;
			}
			height: 80rpx;
			border: 1rpx solid #c3c3c3;
			border-radius: 5rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 26.5rpx;
			align-items: center;
		}
	}
	.item-save-yes {
		width: 690rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #202029;
		margin: 0 auto;
		button {
			background-color: #202029;
			color: #ffffff;
			font-size: 30rpx;
		}
	}

	.item-save-no {
		width: 690rpx;
		height: 80rpx;

		text-align: center;
		line-height: 80rpx;
		background-color: #202029;
		button {
			background-color: #a0a0a7;
			color: #ffffff;
			font-size: 30rpx;
		}
	}
}
.box_card {
	padding: 20rpx 30rpx;
	border-top: 1px solid #ededed;
	.name {
		height: 50%;
		font-size: 28rpx;
		color: #333;
	}
	.card {
		font-size: 25rpx;
		color: #999;
		margin: 10rpx 0 0;
	}
}
.btn {
	font-size: 25rpx;
	color: #fff;
	background: #e5ad5b;
	height: 80rpx;
	margin: 20rpx 0 0;
	width: 100%;
}
</style>
